<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>loading demo</title>

    <link rel="stylesheet"   href="/resources/css/main.css">
    <style type="text/css">
        #overlayer {
            position: absolute;
            left: 0;
            z-index: 90;
            width: 100%;
            height: 100%;
            background-color: #000;
            filter: alpha(opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
            display: none;
        }
        #loadbox {
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 100;
        }

        #loadlayer {
            display: none;
        }

    </style>

</head>

<body style="height: 100%;">

<div id="overlayer"></div>

<div id="loadbox">

    <div id="loadlayer">

        <div id="window_container">
            <div class="header">
                <ul>
                    <li class="floatLi topLeft">&nbsp;</li>
                    <li class="floatLi topMiddle">
                        <span style="width: 50%;font-size:1.3em; font-weight:600;color: #FFFFFF;float: left;">修改密码</span>
                        <span class="close" data-dismiss="modal" onclick="hide();">&nbsp;</span>
                    </li>
                    <li class="floatLi topRight">&nbsp;</li>
                </ul>

            </div>
            <div class="middleContianer">
                <ul>
                    <li class="floatLi middleLeft marginTop">&nbsp;</li>
                    <li class="floatLi middleCenter marginTop">
                        <div class="row">
                            <label class="label" for="oldpassword">
                                原始密码：</label>

                            <div class="collection">
                                <input id="oldpassword" type="password" class="inputDefault" size="20" tabindex="1" maxlength="20"/>
                            </div>
                        </div>
                        <div class="row">
                            <label class="label" for="password">
                                新密码：</label>

                            <div class="collection">
                                <input id="password" type="password" class="inputDefault" size="20" tabindex="1" maxlength="20"/>
                            </div>
                        </div>
                        <div class="row">
                            <label class="label" for="rptpassword">
                                确认新密码：</label>

                            <div class="collection">
                                <input id="rptpassword" type="password" class="inputDefault" size="20" tabindex="1" maxlength="20"/>
                            </div>
                        </div>

                        <div class="row">
                            <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
                                <button class="btn btn-default" onclick="changePwd();">确定</button>
                                <button class="btn btn-default" onclick="hide();">取消</button>
                            </div>
                        </div>
                    </li>
                    <li class="floatLi middleRight marginTop">&nbsp;</li>
                </ul>
            </div>
            <div class="bottomContianer">
                <ul>
                    <li class="floatLi bottomLeft">&nbsp;</li>
                    <li class="floatLi bottomCenter">&nbsp;</li>
                    <li class="floatLi bottomRight">&nbsp;</li>
                </ul>
            </div>
        </div>

    </div>

</div>

<div id="containlayer">

    <input type="button" value="show" onclick="show()"/>

    <input type="button" value="hide" onclick="hide()"/>

    <br/>

    <br/>

    --------------------------------------------------------------------<br/>

    --------------------------------------------------------------------<br/>

    具体的网页内容.写在这里,上面通过一个半透明层遮蔽下面的内容<br/>

</div>

</body>

<script type="text/javascript">
    function show() {
        var loadbox = document.getElementById("loadlayer");
        var overlayer = document.getElementById("overlayer");
        loadbox.style.display = "block";
        overlayer.style.display = "block";
    }
    function hide() {
        var loadbox = document.getElementById("loadlayer");
        var overlayer = document.getElementById("overlayer");
        loadbox.style.display = "none";
        overlayer.style.display = "none";
    }
</script>
</html>